<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                    <el-breadcrumb-item>代理列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <template #header>
                    <div style="display: flex; align-items: center;">
                        <el-input style="width: 260px;" placeholder="请输入UID或用户名" v-model="inputval" />
                        <div style="padding: 5px;"></div>
                        <el-button type="primary" :icon="Search" @click="inputSearch()">搜索</el-button>
                    </div>
                </template>

                <!-- 表格 -->
                <el-table :data="tableData.list" :border="true" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="60" />
                    <el-table-column prop="uid" label="代理UID" />

                    <el-table-column prop="nickname" label="代理用户名" />

                    <el-table-column label="佣金余额">
                        <template #default="scope">
                            <el-tag type="danger">{{ scope.row.agent_money }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="佣金费率">
                        <template #default="scope">
                            <el-tag type="warning">{{ scope.row.agent_rate }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="代理邀请码">
                        <template #default="scope">
                            <el-tag type="success">{{ scope.row.agent_code }}</el-tag>
                        </template>
                    </el-table-column>

<!--                    <el-table-column label="代理来源">
                        <template #default="scope">
                            <el-tag type="success" v-if="scope.row.source == 1">微信注册</el-tag>
                            <el-tag v-if="scope.row.source == 2">手机注册</el-tag>
                        </template>
                    </el-table-column> -->

                    <el-table-column prop="create_time" label="注册时间" />

                    <el-table-column label="操作" width="250">
                        <template #default="scope">
                            <el-button type="warning" :icon="UserFilled"
                                @click="admin_agent_level(scope.row)">查看下级</el-button>
                          <el-button type="success"
                                     @click="admin_agent_follow(scope.row)">绑定托号</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <!-- 分页 -->

                <div style="padding: 10px;"></div>
                <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                    :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
                    :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            </el-card>
        </el-col>
    </el-row>

    <!-- 下级列表 -->
    <el-dialog v-model="agent_dialog" center width="1000" :destroy-on-close="true">
        <el-col :span="24">
            <el-card shadow="hover" style="max-height: 100vh;">
                <template #header>
                    <div style="display: flex; align-items: center;">
                        <el-alert type="success" :closable="false">代理人 <span style="font-size: 20px; color: red;">{{
                            agent_name }}</span> <span>共成功邀请 <span style="font-size: 20px; color: red;">{{
        agenTpage.total }}</span>人</span></el-alert>
                    </div>
                  <el-radio-group v-model="level" @change="changeLevel" style="margin-top: 10px">
                    <el-radio-button label="">全部</el-radio-button>
                    <el-radio-button label="1">1级</el-radio-button>
                    <el-radio-button label="2">2级</el-radio-button>
                    <el-radio-button label="3">3级</el-radio-button>
                  </el-radio-group>
                </template>

                <!-- 表格 -->
                <el-table :data="agentData.list" :border="true" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="60" />
                    <el-table-column prop="uid" label="下级UID" />

                    <el-table-column prop="nickname" label="下级用户名" />


                    <!-- <el-table-column label="代理邀请码">
                        <template #default="scope">
                            <el-tag type="success">{{ scope.row.agent_code }}</el-tag>
                        </template>
                    </el-table-column> -->

                    <el-table-column prop="create_time" label="邀请时间" />


                </el-table>
                <!-- 分页 -->

                <div style="padding: 10px;"></div>
                <el-pagination small background v-model:currentPage="agenTpage.pagenum"
                    v-model:page-size="agenTpage.pagesize" :page-sizes="[20, 50]" :small="small" :background="background"
                    layout="total, prev, pager, next, jumper" :total="agenTpage.total" @size-change="agenthandleSizeChange"
                    @current-change="agenthandleCurrentChange" />

            </el-card>
        </el-col>
    </el-dialog>

  <!-- 托号列表 -->
  <el-dialog v-model="follow_dialog" center width="1000" title="托号列表" :destroy-on-close="true">
    <el-col :span="24">
      <el-card shadow="hover" style="max-height: 100vh;">
        <template #header>
          <div style="display: flex; align-items: center;justify-content: space-between">
            <div><el-button type="primary" :icon="Add" @click="getFuhao()">添加托号</el-button></div>
            <div>是否显示按钮：<el-tooltip :content="followUserInfo.show_follow == 1 ? '显示开启' : '显示关闭'" placement="top">
              <el-switch v-model="followUserInfo.show_follow" :active-value="1" :inactive-value="0"  @change="showFollow"></el-switch>
            </el-tooltip></div>
          </div>
        </template>
        <!-- 表格 -->
        <el-table :data="followData.list" :border="true" style="width: 100%">
          <el-table-column prop="id" label="序号" width="60" />
          <el-table-column prop="uid" label="UID" />

          <el-table-column prop="nickname" label="用户名" />
<!--          <el-table-column prop="nickname" label="跟投" >-->
<!--            <template #default="scope">-->
<!--              <el-button type="warning"-->
<!--                         @click="setFollowStatus(scope.row,0)" v-if="scope.row.status==1">禁用</el-button>-->
<!--              <el-button type="success"-->
<!--                         @click="setFollowStatus(scope.row,1)" v-else>启用</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="odds" label="倍投额" />-->
          <el-table-column prop="create_time" label="绑定时间" />
          <el-table-column prop="create_time" label="操作" >
            <template #default="scope">
              <el-button type="warning"
                         @click="delFollow(scope.row)">解除绑定</el-button>

            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->

        <div style="padding: 10px;"></div>
        <el-pagination small background v-model:currentPage="followPage.pagenum"
                       v-model:page-size="followPage.pagesize" :page-sizes="[20, 50]" :small="small" :background="background"
                       layout="total, prev, pager, next, jumper" :total="followPage.total" @size-change="agenthandleSizeChange"
                       @current-change="agenthandleCurrentChange" />
      </el-card>
    </el-col>
  </el-dialog>

  <!-- 副号列表 -->
  <el-dialog v-model="fuhao_dialog" center width="1000"  :destroy-on-close="true">
    <el-col :span="24">
      <el-card shadow="hover" style="max-height: 100vh;">
        <template #header>
          <div style="display: flex; align-items: center;">
            <el-input style="width: 260px;" placeholder="请输入UID、手机、昵称、备注" v-model="followKey" />
            <div style="padding: 5px;"></div>
            <el-button type="primary" :icon="Search" @click="searchFollow()">搜索</el-button>
          </div>
        </template>
        <!-- 表格 -->
        <el-table :data="fuhaoData.list" :border="true" style="width: 100%">
          <el-table-column prop="id" label="序号" width="60" />
          <el-table-column prop="uid" label="UID" />

          <el-table-column prop="nickname" label="用户名" />
          <el-table-column prop="create_time" label="操作" >
            <template #default="scope">
              <el-button type="warning" :icon="UserFilled"
                         @click="add_fuhao(scope.row)">绑定</el-button>

            </template>
          </el-table-column>

        </el-table>
        <!-- 分页 -->

        <div style="padding: 10px;"></div>
        <el-pagination small background v-model:currentPage="fuhaoPage.pagenum"
                       v-model:page-size="fuhaoPage.pagesize" :page-sizes="[20, 50]" :small="small" :background="background"
                       layout="total, prev, pager, next, jumper" :total="fuhaoPage.total" @size-change="followhandleSizeChange"
                       @current-change="followhandleSizeChange" />

      </el-card>
    </el-col>
  </el-dialog>

</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, UserFilled, Search } from '@element-plus/icons-vue'


const fuhao_dialog = ref(false)
const follow_dialog = ref(false)
const agent_dialog = ref(false)
const agent_name = ref(null)

const tableData = reactive({ list: [] })
const agentData = reactive({ list: [] })
const followData = reactive({ list: [] })
const fuhaoData = reactive({ list: [] })

const level = ref('')


onMounted(() => {
    admin_agent_index()
})

function changeLevel() {
    agenTpage.level = Number(level.value)
    admin_agent_levels()
}
// 获取用户列表
function admin_agent_index() {
    request_post('/admin_agent_index', page).then((res) => {
        if (res.data.code == 200) {
            tableData.list = res.data.data.data
            page.total = res.data.data.total
        } else {
            return error(res.data.msg)
        }
    })

}

// 查看下级
function admin_agent_level(item) {
    agent_name.value = item.nickname
    agenTpage.uid = item.uid
    request_post('/admin_agent_level', agenTpage).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
            agent_dialog.value = true
            agentData.list = res.data.data.data
            agenTpage.total = res.data.data.total
        } else {
            return error(res.data.msg)
        }
    })

}


const followKey = ref('')

function searchFollow() {
  fuhaoPage.pagenum = 1
  fuhaoPage.keyword = followKey.value
  getFuhao()
}

const fuhaoPage = reactive({
  uid: '',
  keyword:'',
  pagenum: 1,
  pagesize: 10,
  total: 0,
})
function getFuhao() {

  fuhaoPage.uid = followUserInfo.uid
  request_post('/admin_follow_user_list',fuhaoPage).then((res) => {
    if (res.data.code == 200) {
      fuhao_dialog.value = true
      fuhaoData.list = res.data.data.data
      fuhaoPage.total = res.data.data.total
    } else {
      return error(res.data.msg)
    }
  })
}

const postFuhao = reactive({
  uid: '',
  follow_uid: '',
  nickname:''
})
function add_fuhao(item) {
  postFuhao.follow_uid = followUserInfo.uid
  postFuhao.uid = item.uid
  postFuhao.nickname = item.nickname
  request_post('/admin_add_follow', postFuhao).then((res) => {
    if (res.data.code == 200) {
      success('操作成功')
      getFuhao()
      getFollowList()
    } else {
      return error(res.data.msg)
    }
  })
}

function setFollowStatus(item,status){
  request_post('/admin_set_follow_status', {id:item.id,status:status}).then((res) => {
    if (res.data.code == 200) {
      success('操作成功')
      getFollowList()
    } else {
      return error(res.data.msg)
    }
  })
}

function delFollow(item){
  request_post('/admin_del_follow', {id:item.id}).then((res) => {
    if (res.data.code == 200) {
      success('操作成功')
      getFollowList()
    } else {
      return error(res.data.msg)
    }
  })
}
function followhandleSizeChange(val) {
  followPage.pagenum = val
  getFuhao()
}

const followUserInfo = reactive({
  uid: '',
  show_follow:0,
});



const followPage = reactive({
  uid: '',
  pagenum: 1,
  pagesize: 10,
  total: 0,
})


function admin_agent_follow(item) {

  followUserInfo.uid = item.uid
  followUserInfo.show_follow = item.show_follow
  followPage.uid = item.uid

  getFollowList()
}

function getFollowList(){

  request_post('/admin_agent_follow', followPage).then((res) => {
    if (res.data.code == 200) {
      follow_dialog.value = true
      followData.list = res.data.data.data
      followPage.total = res.data.data.total
    } else {
      return error(res.data.msg)
    }
  })
}
function showFollow() {
  request_post('/admin_agent_follow_status', followUserInfo).then((res) => {
    if (res.data.code == 200) {
      success('操作成功')
      admin_agent_index()
    } else {
      return error(res.data.msg)
    }
  })
}

// 查看下级
function admin_agent_levels() {

    request_post('/admin_agent_level', agenTpage).then((res) => {

        if (res.data.code == 200) {
            agentData.list = res.data.data.data
            agenTpage.total = res.data.data.total
        } else {
            return error(res.data.msg)
        }
    })

}


const agenTpage = reactive({
    uid: '',
    pagenum: 1,
    pagesize: 10,
    total: 0,
    level: ''
})



function agenthandleSizeChange(val) {
    agenTpage.pagenum = val
    admin_agent_levels()
}
function agenthandleCurrentChange(val) {
    agenTpage.pagenum = val
    admin_agent_levels()
}

const inputval = ref('')

function inputSearch() {
    if (inputval.value == '') {
        return error('请输入UID或用户名')
    }
    page.uid = inputval.value
    admin_agent_index()
}


const page = reactive({
    uid: null,
    pagenum: 1,
    pagesize: 18,
    total: 0
})

function handleSizeChange(val) {
    page.pagenum = val
    admin_users_index()
}
function handleCurrentChange(val) {
    page.pagenum = val
    admin_users_index()
}


</script>

<style></style>
